/**
 * @Author:marina
 * @Date: 2025-02-20 15:45:24 
 * @Description: 水滴融合组件
 */

<template>
    <div
        class="water-fusion"
        :style="{
            width: _height,
            height: _width,
            '--center-r': _centerR,
            '--around-r': _aroundR,
            '--center-font-size': _centerFontSize
        }"
    >
        <div class="center">
            <div class="loader">
                <div class="circle--center">
                    <div
                        class="text"
                        @click="reset"
                    >{{ num }}%</div>
                </div>
                <div class="circle circle--1"></div>
                <div class="circle circle--2"></div>
                <div class="circle circle--3"></div>
                <div class="circle circle--4"></div>
                <div class="circle circle--5"></div>
                <div class="circle circle--6"></div>
                <div class="circle circle--7"></div>
            </div>
        </div>
        <svg>
            <defs>
                <filter id="goo">
                    <feGaussianBlur
                        in="SourceGraphic"
                        stdDeviation="10"
                        result="blur"
                    ></feGaussianBlur>
                    <feColorMatrix
                        in="blur"
                        mode="matrix"
                        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
                        result="goo"
                    ></feColorMatrix>
                    <feBlend
                        in="SourceGraphic"
                        in2="goo"
                    ></feBlend>
                </filter>
            </defs>
        </svg>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

let prop = defineProps({
    // 组件宽度
    _width: {
        type: String,
        default: '300px'
    },
    //组件高度
    _height: {
        type: String,
        default: '400px'
    },
    //中心圆半径
    _centerR: {
        type: String,
        default: '50px'
    },
    //周围小圆半径
    _aroundR: {
        type: String,
        default: '25px'
    },
    //中心圆字体大小
    _centerFontSize: {
        type: String,
        default: '15px'
    }
})

let num = ref(0)
function countUp(count = 0) {
    num.value = count
    if (count < 100) {
        setTimeout(() => countUp(count + 1), 9500 / 100);
    } else {
        setTimeout(() => {
            num.value = 100;
        }, 1000);
    }
}

function reset() {
    if (num.value === 100) {
        location['reload']();
    }
}

onMounted(() => {
    countUp();
})

</script>

<style lang="less" scoped>
.water-fusion {
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;

    // @center-r: 50px;
    // @around-r: 25px;
    // @center-font-size: 20px;

    .center {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: transform 0.5s;
        z-index: 1;
    }

    .loader {
        filter: url("#goo");
        display: flex;
        justify-content: center;
    }

    .circle,
    .circle--center {
        background-color: #2136b5;
        border-radius: 50%;
    }

    .circle--center {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--center-r);
        height: var(--center-r);
        font-size: var(--center-font-size);
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        scale: 0.7;
        -webkit-animation: 9s 1.5s grow forwards linear;
        animation: 9s 1.5s grow forwards linear;
        z-index: 1;
    }

    .circle--center .text {
        margin-left: 4px;
        color: #fff;
    }

    .circle {
        position: absolute;
        top: 15px;
        width: var(--around-r);
        height: var(--around-r);
        opacity: 0;
        will-change: transform, opacity;
    }

    .circle.circle--1 {
        transform: translate(0, -180px);
        -webkit-animation: 3s 0s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
        animation: 3s 0s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
    }

    .circle.circle--2 {
        transform: translate(127px, -127px);
        -webkit-animation: 3s 1.5s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
        animation: 3s 1.5s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
    }

    .circle.circle--3 {
        transform: translate(180px, 0);
        -webkit-animation: 3s 3s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
        animation: 3s 3s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
    }

    .circle.circle--4 {
        transform: translate(127px, 127px);
        -webkit-animation: 3s 4.5s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
        animation: 3s 4.5s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
    }

    .circle.circle--5 {
        transform: translate(0, 180px);
        -webkit-animation: 3s 6s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
        animation: 3s 6s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
    }

    .circle.circle--6 {
        transform: translate(-127px, 127px);
        -webkit-animation: 3s 7.5s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
        animation: 3s 7.5s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
    }

    .circle.circle--7 {
        transform: translate(-180px, 0px);
        -webkit-animation: 3s 9s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
        animation: 3s 9s circle forwards cubic-bezier(0.4, 0, 0.2, 1);
    }

    @-webkit-keyframes circle {
        0% {
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }

    @keyframes circle {
        0% {
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }

    @-webkit-keyframes grow {
        from {
            scale: 0.7;
        }

        to {
            scale: 1.5;
        }
    }

    @keyframes grow {
        from {
            scale: 0.7;
        }

        to {
            scale: 1.5;
        }
    }
}
</style>